import React from 'react'
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Redirect
} from 'react-router-dom'
import Home from './pages/Home'
import CityList from './pages/CityList'
import Map from './pages/Map'
import HouseDetail from './pages/HouseDetail'
import Login from './pages/Login'
import Registe from './pages/Registe'
import AuthRoute from './components/AuthRoute'
import Rent from './pages/Rent'
import RentAdd from './pages/Rent/Add'
import RentSearch from './pages/Rent/Search'
import Favorite from './pages/Favorite'
class App extends React.Component {
  render () {
    return (
      <Router>
        <div className='App' style={{ height: '100%' }}>
          <Switch>
            <Route path='/home' component={Home}></Route>
            <Route path='/citylist' component={CityList}></Route>
            <AuthRoute path='/map' component={Map}></AuthRoute>
            <Route path='/login' component={Login}></Route>
            <Route path='/registe' component={Registe}></Route>
            <Route path='/detail/:id' component={HouseDetail} />
            {/* 这两种写法都可以，注意当使用重定向的时候，路由模式需要时exact */}
            <Redirect exact from='/' to='/home'></Redirect>
            {/* <Route path='/' exact render={() => <Redirect to='/home' />}></Route> */}

            {/* 配置登录后，才能访问的页面 */}
            <AuthRoute exact path='/rent' component={Rent} />
            <AuthRoute exact path='/favorite' component={Favorite} />
            <AuthRoute path='/rent/add' component={RentAdd} />
            <AuthRoute path='/rent/search' component={RentSearch} />
          </Switch>
        </div>
      </Router>
    )
  }
}
export default App
